<template>
  <file-upload
    ref="upload"
    :size="4096 * 2048"
    :accept="allowedFileTypes"
    :data="{
      direct_upload_url: '/api/v1/widget/direct_uploads',
      direct_upload: true
    }"
    @input-file="onFileUpload"
  >
    <button class="icon-button flex items-center justify-center">
      <fluent-icon v-if="!isUploading.image" icon="attach" />
      <spinner v-if="isUploading" size="small" />
    </button>
  </file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component'
import Spinner from '@/yichat.web.share/components/Spinner.vue'
import { checkFileSizeLimit } from '@/yichat.web.share/helpers/FileHelper'
import {
  MAXIMUM_FILE_UPLOAD_SIZE,
  ALLOWED_FILE_TYPES
} from '@/yichat.web.share/constants/messages'
import { BUS_EVENTS } from '@/yichat.web.share/constants/busEvents'
import FluentIcon from '@/yichat.web.share/components/FluentIcon/Index.vue'
// import { DirectUpload } from 'activestorage'
import { mapGetters } from 'vuex'

export default {
  components: { FluentIcon, FileUpload, Spinner },
  props: {
    onAttach: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return { isUploading: false }
  },
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
    fileUploadSizeLimit() {
      return MAXIMUM_FILE_UPLOAD_SIZE
    },
    allowedFileTypes() {
      return ALLOWED_FILE_TYPES
    }
  },
  mounted() {
    document.addEventListener('paste', this.handleClipboardPaste)
  },
  destroyed() {
    document.removeEventListener('paste', this.handleClipboardPaste)
  },
  methods: {
    handleClipboardPaste(e) {
      const items = (e.clipboardData || e.originalEvent.clipboardData).items
      items.forEach(item => {
        if (item.kind === 'file') {
          e.preventDefault()
          const file = item.getAsFile()
          this.$refs.upload.add(file)
        }
      })
    },
    getFileType(fileType) {
      return fileType.includes('image') ? 'image' : 'file'
    },
    async onFileUpload(file) {
      if (this.globalConfig.directUploadsEnabled) {
        // await this.onDirectFileUpload(file)
      } else {
        // await this.onIndirectFileUpload(file)
      }
    },
    async onDirectFileUpload(file) {
      if (!file) {
        return
      }
      this.isUploading = true
      try {
        if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
          // const { websiteToken } = window.chatwootWebChannel
          // const upload = new DirectUpload(
          //   file.file,
          //   `/api/v1/widget/direct_uploads?website_token=${websiteToken}`,
          //   {
          //     directUploadWillCreateBlobWithXHR: xhr => {
          //       xhr.setRequestHeader('X-Auth-Token', window.authToken)
          //     }
          //   }
          // )
          const upload = {}

          upload.create((error, blob) => {
            if (error) {
              window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
                message: error
              })
            } else {
              this.onAttach({
                file: blob.signed_id,
                ...this.getLocalFileAttributes(file)
              })
            }
          })
        } else {
          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
            message: this.$t('FILE_SIZE_LIMIT', {
              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit
            })
          })
        }
      } catch (error) {
        // Error
      }
      this.isUploading = false
    },
    async onIndirectFileUpload(file) {
      if (!file) {
        return
      }
      this.isUploading = true
      try {
        if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
          await this.onAttach({
            file: file.file,
            ...this.getLocalFileAttributes(file)
          })
        } else {
          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
            message: this.$t('FILE_SIZE_LIMIT', {
              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit
            })
          })
        }
      } catch (error) {
        // Error
      }
      this.isUploading = false
    },
    getLocalFileAttributes(file) {
      return {
        thumbUrl: window.URL.createObjectURL(file.file),
        fileType: this.getFileType(file.type)
      }
    }
  }
}
</script>
